<template>
<!-- 审批详情页 -->
   <div>
       <el-row :gutter="20" style=" padding-left:30px; padding-top:20px;">
            <el-col :span="17">
                <div class="grid-content bg-purple">
                    <div style="padding-left:30px; padding-top:50px;">
                       <el-image
                        style="width: 130px; height: 130px"
                        :src="voteInfo.tuser.icon"
                        ></el-image>
                    </div>
                    <div class="kuai1">
                        <span style="font-size:30px">{{voteInfo.title}}
                            &nbsp;
                            <template>
                            <el-tag size="small" v-if="voteInfo.status==1" effect="dark">审批中</el-tag>
                            <el-tag size="small" type="success" v-if="voteInfo.status==2" effect="dark">已同意</el-tag>
                            <el-tag size="small" type="info" v-if="voteInfo.status==4" effect="dark">已撤销</el-tag>
                            <el-tag size="small"  type="danger" v-if="voteInfo.status==3" effect="dark">已拒绝</el-tag>
                            </template>
                        </span>
                        <br/><br/>
                        <span>提交于{{voteInfo.sponsorTime}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">审批编号：{{voteInfo.id}}</span>
                        <el-row style="position: relative;left:450px;top:-70px;">
                          <!-- 获取当前登陆人，然后不等于当前登陆人 自己不能给自己审批 -->
                            <el-button v-if="a.approvalStatus2==1 && a.approval2==a.sponsorId2 " icon="el-icon-check" size="small" type="primary" plain @click="updateStatus2">同意</el-button> 
                            <el-button v-if="a.approvalStatus2==1 && a.approval2==a.sponsorId2" icon="el-icon-close" size="small" type="danger" plain @click="updateStatus1">拒绝</el-button>
                        </el-row>
                  
                    </div>
                    <div class="kuai2">
                        <div class="kuang"></div>
                        <span style=" padding-left:40px;font-size:14px" >审批详情</span>
                        <div class="xian"></div>
                        <div class="neiqian1">
                            员工信息
                            <br/><br/>
                            <span style="color:#909399">申请人:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tuser.username}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">工作邮箱:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tuser.username}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">手机:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tuser.username}}
                            <br/><br/>
                            <span style="color:#909399">工号:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.id}}
                        </div>
                        <br/><br/><br/>
                        <div class="neiqian1">
                            岗位信息
                            <br/><br/>
                            <span style="color:#909399">岗位名称:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.positionName}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">岗位性质:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.postType==0? "全职": voteInfo.tposition.postType==1? "兼职": voteInfo.tposition.postType==2? "实习" :voteInfo.tposition.postType==3? "外派": "退休返聘"}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">所属部门:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.deptName}}
                            <br/><br/>
                            <span style="color:#909399">职级:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.myRank}}
                              &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">直属领导:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.directSupervisor}}
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">最高领导:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.leader}}
                        </div>
                        <br/><br/><br/>
                        <div class="neiqian1">
                            人事信息
                            <br/><br/>
                            <span style="color:#909399">转正日期:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.becomeTime}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">入职日期:</span>&nbsp;&nbsp;&nbsp;{{voteInfo.tposition.entryTime}}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color:#909399">薪资调整:</span>&nbsp;&nbsp;&nbsp;+20%
                        </div>
                    </div>
                    
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <span style=" position: relative;top:20px;left:20px">审批流程</span>
                    <el-timeline  style=" position: relative;top:50px;left:-10px">
                    <el-timeline-item color="#409EFF">
                        提交 &nbsp;&nbsp;
                        <span style="color:#909399">{{voteInfo.sponsorTime}}</span>
                        <br/>
                        <img  :src="voteInfo.tuser.icon" class="avatar" @click="headPage=true">
                        <br/>{{voteInfo.tuser.nickName}}
                        </el-timeline-item>
                     <el-timeline-item color="#67C23A" v-for="(item,index) in getApprover" :key="index">
                        审批人 &nbsp;&nbsp;
                        <el-tag  size="mini" v-if="item.approvalStatus==1">待审核</el-tag>
                         <el-tag  size="mini" v-if="item.approvalStatus==2" type="success">已同意</el-tag>
                        <el-tag  size="mini" v-if="item.approvalStatus==3" type="danger">已拒绝</el-tag>
                        <br/><br/>
                         <img  :src="item.userInfo.icon" class="avatar" @click="headPage=true">
                         <br/>
                       {{item.userInfo.nickName}} 
                     </el-timeline-item>
                     <el-timeline-item color="#E6A23C">抄送人
                         <br/><br/>
                        <img  :src="getCarbon.icon" class="avatar" @click="headPage=true">
                         <br/>
                        {{getCarbon.nickName}}
                     </el-timeline-item>
                </el-timeline>
                </div>
            </el-col>
           
       </el-row>
   </div>
</template>

<script>
import axios from 'axios'
import { parseTime } from '@/utils/ruoyi';
export default {
    data(){
        return{
            
           voteInfo:{
            carbon:'',
            

           },
           a:{
              sponsorId2:"", //当前登录人id
              approval2:"", //当前审批人
              approvalStatus2:"", //当前审批状态

           },
           
           getCarbon:{

           },
           getApprover:[]
        }

    },
    created(){
      this.findById();
    },
    methods: {

        //回显审批列表
        findById(){
          var a=JSON.parse(localStorage.getItem("user"))
          this.a.sponsorId2=a.id
            axios
            .get("auditCenter/findTAuditCenterById?id=" + this.$route.query.id)
            
            .then((res) => {
            this.voteInfo = res.data;

            
            this.voteInfo.sponsorTime = parseTime(this.voteInfo.sponsorTime,'{y}-{m}-{d} {h}:{i}:{s}')
            this.voteInfo.tposition.becomeTime = parseTime(this.voteInfo.tposition.becomeTime,'{y}-{m}-{d}')
            this.voteInfo.tposition.entryTime = parseTime(this.voteInfo.tposition.entryTime,'{y}-{m}-{d}')
             
            // 抄送人获取
              axios
              .get("demo/findUserAndAuditById2?id=" + this.voteInfo.carbon+"&sponsorId="+this.voteInfo.sponsorId)
              .then((res) => {
              this.getCarbon = res.data;
              // console.log(res)
              });
              this.aaa()
             console.log(this.a.approval2)
             console.log(this.a.approvalStatus2)
             
             

            });
        },
      async aaa(){
        //审批人获取
        var ids=this.voteInfo.approver;
              ids=ids.replace(/\,/g,'');
              this.getApprover=[];
              var state= this.voteInfo.approvalStatus.split(",")
              
              var j = -1
              for(var i=0;i<ids.length;i++){
               await axios
                .get("demo/findUserAndAuditById?id=" + ids[i]+"&sponsorId="+this.voteInfo.sponsorId)
                .then((res) => {
                  j++
                 this.getApprover.push({userInfo:res.data,approvalStatus:state[j]});
                });
              }
              
              if(state[0]==1){
                this.a.approval2=ids[0]
                this.a.approvalStatus2=state[0]
              }else if(state[1]==1){
                this.a.approval2=ids[1]
                this.a.approvalStatus2=state[1]
              }else{
                this.a.approval2=ids[2]
                this.a.approvalStatus2=state[2]
              }
      },
         // 审批   拒绝
      updateStatus1(){
      var approverId=this.voteInfo.approver.split(",");
       var state= this.voteInfo.approvalStatus.split(",");
       var approveStatus="";
       for(var i=0;i<approverId.length;i++){
          if(this.a.sponsorId2==approverId[i]){
             state[i]="3"
          }else if(state[i]>approverId[i]){
            state[i]="4"
          }
          if(approveStatus==""){
            approveStatus+=state[i]
          }else{
            approveStatus+=","+state[i]
          }
       }
       console.log(approveStatus)
        this.voteInfo.approvalStatus=approveStatus
        axios
          .post("auditCenter/updateApprovalStatusById", this.voteInfo)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "恭喜你，" + res.data.msg,
                type: "success",
              });
             this.findById();
            } else {
              this.$message.error("错了哦，" + res.data.msg);
            }
          });
      },
      //审批  同意
      updateStatus2(){
       var approverId=this.voteInfo.approver.split(",");
       var state= this.voteInfo.approvalStatus.split(",");
       var approveStatus="";
       for(var i=0;i<approverId.length;i++){
          if(this.a.sponsorId2==approverId[i]){
             state[i]="2"
          }
          if(approveStatus==""){
            approveStatus+=state[i]
          }else{
            approveStatus+=","+state[i]
          }
       }
       console.log(approveStatus)
        this.voteInfo.approvalStatus=approveStatus
        axios
          .post("auditCenter/updateApprovalStatusById", this.voteInfo)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "恭喜你，" + res.data.msg,
                type: "success",
              });
               this.findById();
            } else {
              this.$message.error("错了哦，" + res.data.msg);
            }
          });
      }
    }
}
</script>

<style scoped>
  .neiqian1{
    width: 800px;
    height: 100px;
    /* border: 1px red solid; */
    position: relative;
    top:30px;
    left:35px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
 .kuai1{
    width: 700px;
    height: 100px;
    /* border: 1px red solid; */
    position: relative;
    top:-100px;
    left: 190px;
    
 }
 .kuai2{
    width: 880px;
    height: 400px;
    /* border: 1px red solid; */
    position: relative;
    top:-80px;
    left: 10px;
    
 }
 .el-row {
    margin-bottom: 20px;
   
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: white;
    height: 700px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .kuang{
        width: 3px;
        height: 20px;
        background-color: #409EFF;
        margin-left: 30px;
        position: relative;
        top: 20px;
    }
    .xian{
        width: 855px;
        height: 2px;
        background-color: #EBEEF5;
        margin-left:30px;
        margin-top: 10px;
       
    }
</style>